<template>
  <el-row :gutter="10" class="content-body" v-loading="props.loading"
    :element-loading-background="props.background"
    :element-loading-text="props.text"
  >
    <slot></slot>
    <div class="content-page">
      <slot name="pagination"></slot>
    </div>
  </el-row>
</template>

<script setup lang="ts">
interface Props {
  loading?: boolean
  background?: string
  text?: string
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  background: '#efefef',
  text: '加载中...'
})
</script>

<style lang="less">
.content-body{
  margin: 10px !important;
  padding: 10px;
  background: #fff;
  overflow: auto;
  
  .content-page{
    margin: 0 auto;
    text-align: center;
  }
}
</style>